<template>
  <el-form>
    <el-row class="borderCss">
      <el-row class="m-left20 m-top10">
        <el-col :span="18">
          <span>学生数量</span>
        </el-col>
        <el-col :span="6">
          <span
            >{{
              educationDataObj.totalTenantPostNumber.studentNum || 0
            }}人</span
          >
        </el-col>
      </el-row>
      <el-row class="m-left20 m-top10">
        <el-col :span="18">
          <span>完成测评数量</span>
        </el-col>
        <el-col :span="6">
          <span>{{ hearderTitle.completeTestNum || 0 }}人</span>
        </el-col>
      </el-row>
      <el-row class="m-left20 m-top10">
        <el-col :span="18">
          <span>未完成测评数量</span>
        </el-col>
        <el-col :span="6">
          <span>{{ hearderTitle.noCompleteTestNum || 0 }}人</span>
        </el-col>
      </el-row>
      <el-row class="m-left20 m-top10">
        <el-col :span="18">
          <span>心理教师数量</span>
        </el-col>
        <el-col :span="6">
          <span
            >{{
              educationDataObj.totalTenantPostNumber.teacherNum || 0
            }}人</span
          >
        </el-col>
      </el-row>
      <el-row class="m-left20 m-top10">
        <el-col :span="18">
          <span>测评数据总量 </span>
        </el-col>
        <el-col :span="6">
          <span>{{ hearderTitle.allTestNum }}份</span>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="borderCss">
      <el-row class="titleCss">
        <span>心理辅导学校分布</span>
      </el-row>
      <el-row class="m-left20 m-top10">
        <span>心理辅导各校人数分布</span>
      </el-row>
      <el-row class="m-left20">
        <div id="schoolBar" style="height: 280px"></div>
      </el-row>
      <hr />
      <el-row class="m-left20 m-top20">
        <span>心理辅导各样占比分布</span>
      </el-row>
      <el-row style="height: 200px">
        <div id="schoolPie" style="height: 300px"></div>
      </el-row>
    </el-row>
    <el-row class="borderCss">
      <table border="1" class="table_style m-top20">
        <tbody>
          <tr>
            <td></td>
            <td>心理咨询人数</td>
            <td>心理咨询次数</td>
          </tr>
          <tr>
            <td>心理健康</td>
            <td>50</td>
            <td>99</td>
          </tr>
          <tr>
            <td>问题行为</td>
            <td>100</td>
            <td>146</td>
          </tr>
          <tr>
            <td>人际关系</td>
            <td>150</td>
            <td>190</td>
          </tr>
          <tr>
            <td>生活方式</td>
            <td>80</td>
            <td>139</td>
          </tr>
          <tr>
            <td>自我认识</td>
            <td>120</td>
            <td>150</td>
          </tr>
        </tbody>
      </table>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  props: ["educationDataObj"],
  data() {
    return {
      hearderTitle: {
        completeTestNum: 0,
        noCompleteTestNum: 0,
        allTestNum: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.getTotleInfo();
    this.getSchoolBarInfo();
    this.getSchoolPieInfo();
  },
  methods: {
    getTotleInfo() {
      let obj = this.educationDataObj;
      this.hearderTitle.allTestNum = obj.findALLTestNum.length
        ? obj.findALLTestNum[0].num
        : 0;
      this.hearderTitle.completeTestNum = obj.findFinishTestNum.length
        ? obj.findFinishTestNum[0].num
        : 0;
      this.hearderTitle.noCompleteTestNum = obj.findFinishNoTestNum.length
        ? obj.findFinishNoTestNum[0].num
        : 0;
    },
    getSchoolPieInfo() {
      var chartDom = document.getElementById("schoolPie");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        grid: {
          height: 280,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          right: 10,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["20%", "35%"],
            center: ["39%", "30%"],
            data: [
              { value: 50, name: "龙华一小" },
              { value: 100, name: "创新实验" },
              { value: 150, name: "高峰小学" },
              { value: 80, name: "龙为小学" },
              { value: 120, name: "观澜二小" },
            ],
            labelLine: {
              length: 5,
              length2: 5,
              show: true,
            },
            label: {
              // position: "inside",
              formatter: "{d}%",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getSchoolBarInfo() {
      var chartDom = document.getElementById("schoolBar");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          top: 50,
          bottom: "15%",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: ["龙华一小", "创新实验", "高峰小学", "龙为小学", "观澜二小"],
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [50, 100, 150, 80, 120],
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.textCenter {
  text-align: center;
}
.margin40 {
  margin: 40px;
}
.table_style td,
th {
  padding: 5px;
  font-size: 15px;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.m-bottom30 {
  margin-bottom: 30px;
}
.m-left20 {
  margin-left: 20px;
}
.m-top20 {
  margin-top: 20px;
}
.m-top10 {
  margin-top: 10px;
}
.borderCss {
  border-bottom: 6px solid #f0f0f0;
  margin-left: -20px;
  border-right: 6px;
  margin-top: -20px;
}
.titleCss {
  margin-left: 10px;
  margin-top: 30px;
  font-weight: bold;
}
</style>
